<template>
  <el-dialog :visible="show" append-to-body :title="dataContent.name||title" :before-close="close">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <template v-for="(item, index) in formContent">
        <el-form-item :key="index" :label="item.name" :prop="item.field" :rules="[{required: item.require, message: `请输入${item.name}`, trigger: ['blur', 'change']}]">
          <template v-if="item.type == 'SELECT'">
            <el-select v-model="form[item.field]" :placeholder="`请选择${item.name}`">
              <el-option v-for="(sel,idx) in item.args" :key="idx" :label="sel.name" :value="sel.value"></el-option>
            </el-select>
          </template>

          <template v-if="(['TEXT'].includes(item.type))">
            <el-input v-model="form[item.field]" :placeholder="`请输入${item.name}`"></el-input>
          </template>
          <template v-if="(['TEXTAREA'].includes(item.type))">
            <el-input v-model="form[item.field]" type="textarea" :rows="3" :placeholder="`请输入${item.name}`"></el-input>
          </template>
          <template v-if="(['DATATIME'].includes(item.type))">
            <Datetime v-model="form[item.field]" :type="item.type" :args="item.args"></Datetime>
          </template>
          <template v-if="(['IMAGE'].includes(item.type))">
            <ImageUpload v-model="form[item.field]"></ImageUpload>
          </template>

        </el-form-item>
      </template>
    </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script>
import Datetime from "./datetime";
import { startForm } from "@/api/flow";
export default {
  components: { Datetime },
  props: {
    show: Boolean,
    title: { type: String, default: "系统提示" },
    params: { type: Object, default: () => {} },
    fields: { type: Array, default: () => [] },
  },
  data() {
    return {
      dataContent: {},
      formContent: {},
      form: {},
      rules: {},
    };
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    async getForm() {
      try {
        const res = await startForm({
          ARG_DEFINE_ID: 13,
          ARG_USER_SYSTEM: 1,
          ...this.params,
        });
        if (res.data && res.data.length > 0) {
          this.dataContent = res.data[0].form;
          const forms = [];
          res.data[0].form.fields.forEach((item) => {
            if (!["HIDDEN", "EXPRESSION"].includes(item.type)) {
              this.$set(this.form, item.field, item.defaultValue);
              forms.push(item);
            }
          });

          this.formContent = forms;
        }
      } catch (error) {}
    },
    submit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$emit("submit", this.form);
        }
      });
    },
  },
};
</script>